{% extends "base.html" %}

{% block title %}告警管理{% endblock %}

{% block head %}
{{ super() }}
<!-- DataTables -->
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- DataTables button -->
<link rel="stylesheet" href="/static/bower_components/fx/buttons.bootstrap.min.css">
<!-- DataTables searchPanes -->
<link rel="stylesheet" href="/static/bower_components/fx/searchPanes.bootstrap.min.css">
<link rel="stylesheet" href="/static/bower_components/fx/select.bootstrap.min.css">
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    告警管理
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li class="active">告警管理</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#firing" data-toggle="tab">待处理（{{ firing }}）</a></li>
          <li><a href="#resolved" data-toggle="tab">已解决（{{ resolved }}）</a></li>
          <li><a href="#all" data-toggle="tab">全部（{{ total }}）</a></li>
        </ul>
        <div class="tab-content">
          <div class="active tab-pane" id="firing">
            <!--表格1-->
            <div class="box-body table-responsive">
              <table id="firing_table" class="table table-condensed table-striped table-hover table-bordered"
                     style="font-size: 90%;width:100%">
                <thead>
                <tr>
                  <th style="text-align: center">序号</th>
                  <th style="text-align: center">级别</th>
                  <th style="text-align: center">告警内容</th>
                  <th style="text-align: center">告警源</th>
                  <th style="text-align: center">告警标题</th>
                  <th style="text-align: center">主机</th>
                  <th style="text-align: center">发生时间</th>
                </tr>
                </thead>
                <tbody>
                {% for i in all_firing %}
                <tr>
                  <td>{{i.id}}</td>
                  <td>{{i.severity or ''}}</td>
                  <td>{{i.content or ''}}</td>
                  <td>{{i.source or ''}}</td>
                  <td>{{i.alertname or ''}}</td>
                  <td>{{i.instance or ''}}</td>
                  <td>{{i.startsAt or ''}}</td>
                </tr>
                {% endfor %}
                </tbody>
              </table>

            </div>
            <!-- /.box-body -->

            <!-- /.box -->
          </div>
          <div class="tab-pane" id="resolved">
            <!--表格1-->
            <div class="box-body table-responsive">
              <table id="resolved_table" class="table  table-condensed table-bordered"
                     style="font-size: 90%;width:100%">
                <thead>
                <tr>
                  <th style="text-align: center">序号</th>
                  <th style="text-align: center">级别</th>
                  <th style="text-align: center">告警内容</th>
                  <th style="text-align: center">告警源</th>
                  <th style="text-align: center">告警标题</th>
                  <th style="text-align: center">主机</th>
                  <th style="text-align: center">发生时间</th>
                  <th style="text-align: center">结束时间</th>
                </tr>
                </thead>
                <tbody>
                {% for i in all_resolved %}
                <tr>
                  <td>{{i.id}}</td>
                  <td>{{i.severity or ''}}</td>
                  <td>{{i.content or ''}}</td>
                  <td>{{i.source or ''}}</td>
                  <td>{{i.alertname or ''}}</td>
                  <td>{{i.instance or ''}}</td>
                  <td>{{i.startsAt or ''}}</td>
                  <td>{{i.endsAt or ''}}</td>
                </tr>
                {% endfor %}
                </tbody>
              </table>

            </div>
            <!-- /.box-body -->

            <!-- /.box -->
          </div>
          <div class="tab-pane" id="all">
            <!--表格1-->
            <div class="box-body table-responsive">
              <table id="all_table" class="table  table-condensed table-bordered"
                     style="font-size: 90%;width:100%">
                <thead>
                <tr>
                  <th style="text-align: center">序号</th>
                  <th style="text-align: center">级别</th>
                  <th style="text-align: center">状态</th>
                  <th style="text-align: center">告警内容</th>
                  <th style="text-align: center">告警源</th>
                  <th style="text-align: center">告警标题</th>
                  <th style="text-align: center">主机</th>
                  <th style="text-align: center">发生时间</th>
                  <th style="text-align: center">结束时间</th>
                  <th style="text-align: center">更新时间</th>
                </tr>
                </thead>
                <tbody>
                {% for i in all %}
                <tr>
                  <td>{{i.id}}</td>
                  <td>{{i.severity or ''}}</td>
                  <td>{{i.status or ''}}</td>
                  <td>{{i.content or ''}}</td>
                  <td>{{i.source or ''}}</td>
                  <td>{{i.alertname or ''}}</td>
                  <td>{{i.instance or ''}}</td>
                  <td>{{i.startsAt or ''}}</td>
                  <td>{{i.endsAt or ''}}</td>
                  <td>{{i.updateAt or ''}}</td>
                </tr>
                {% endfor %}
                </tbody>
              </table>

            </div>
            <!-- /.box-body -->

            <!-- /.box -->
          </div>
        </div>
      </div>


    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->
{% endblock %}


{% block script %}
<!-- DataTables -->
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- DataTables buttons-->
<script src="/static/bower_components/fx/dataTables.buttons.min.js"></script>
<script src="/static/bower_components/fx/buttons.bootstrap.min.js"></script>
<script src="/static/bower_components/fx/jszip.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>-->
<script src="/static/bower_components/fx/buttons.html5.min.js"></script>
<!--<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>-->
<script src="/static/bower_components/fx/buttons.colVis.min.js"></script>

<!-- DataTables searchPanes-->
<script src="/static/bower_components/fx/dataTables.searchPanes.min.js"></script>
<script src="/static/bower_components/fx/searchPanes.bootstrap.min.js"></script>
<script src="/static/bower_components/fx/dataTables.select.min.js"></script>

<!-- Page specific script -->
<script>
    function cellColor(row, data) {
        // console.log(row)
        // console.log(data)
        if (data[1] === "critical") {
            $('td:eq(1)', row).html('严重').css("background-color", "#E45959");
        } else if (data[1] === "warning") {
            $('td:eq(1)', row).html('一般').css("background-color", "#FFA059");
        } else if (data[1] === "info") {
            $('td:eq(1)', row).html('轻微').css("background-color", "#98FB98");
        } else {
            $('td:eq(1)', row).html('通知').css("background-color", "#D1EEEE");
        }
    }

    $(function () {
        var table1 = $('#firing_table').DataTable({
            "language": {
                "url": "/static/language.json"
            },
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": false,
            "info": true,
            "autoWidth": true,
            "responsive": true,
            "rowCallback": function (row, data) {
                cellColor(row, data)
            },
            searchPanes: {
                initCollapsed: true,
                // cascadePanes: true
            },
            columnDefs: [
            {
                searchPanes: {
                    show: false
                },
                targets: [0,2,6]
            },
        ]
        });
        table1.searchPanes.container().prependTo(table1.table().container());
        table1.searchPanes.resizePanes();

        var table2 = $('#resolved_table').DataTable({
            "language": language,
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": false,
            "info": true,
            "autoWidth": true,
            "responsive": true,
            "rowCallback": function (row, data) {
                cellColor(row, data)
            },
            searchPanes: {
                initCollapsed: true,
                // cascadePanes: true
            },
            columnDefs: [
            {
                searchPanes: {
                    show: false
                },
                targets: [0,2,6,7]
            },
        ]
        });
        table2.searchPanes.container().prependTo(table2.table().container());
        table2.searchPanes.resizePanes();

        var table3 = $('#all_table').DataTable({
            "language": language,
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": false,
            "info": true,
            "autoWidth": true,
            "responsive": true,
            "rowCallback": function (row, data) {
                cellColor(row, data)
            },
            searchPanes: {
                initCollapsed: true,
                // cascadePanes: true
            },
            columnDefs: [
            {
                targets: [0,2,6,7,8],
                searchPanes: {
                    show: false
                },

            },
        ]
        });
        table3.searchPanes.container().prependTo(table3.table().container());
        table3.searchPanes.resizePanes();



    });
</script>
{% endblock%}